import { Carousel, Popover, Button, message, Modal, Spin } from 'antd';
import React, { useEffect, useState } from 'react';
import './App.css'

const App = () => {
  const [userInfo, setUserInfo] = useState({})
  const [loading, setLoading] = useState(false)
  useEffect(()=>{
    window.handleCredentialResponse = handleCredentialResponse
  },[])
  function handleCredentialResponse (response) {
    // decodeJwtResponse() is a custom function defined by you
    // to decode the credential response.
    const responsePayload = decodeJwtResponse(response.credential);
    var email = responsePayload.email;
    setLoading(true)
    fetch('https://sc2-api.imeboo.com/api/users/getUserBaseInfoByEmail', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ "email": 'mr.vencnet@gmail.com' })
    })
      .then(response => response.json())
      .then(response => {
        if (typeof response.data == 'undefined') {
          message.error("The account has been deleted or does not exist.")
          return;
        }
        setUserInfo({...response.data, email})
        setLoading(false)
      }).finally(()=>{
        setLoading(false)
      })
  }
  
  function decodeJwtResponse (token) {
    var base64Url = token.split(".")[1];
    var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
    var jsonPayload = decodeURIComponent(
      atob(base64)
        .split("")
        .map(function (c) {
          return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
        })
        .join("")
    );

    return JSON.parse(jsonPayload);
  }

  function del(){
    setLoading(true)
    fetch('https://sc2-api.imeboo.com/api/users/removeByEmail ', {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ email: userInfo.email, account: userInfo.userCode })
    })
      .then(() => {
        setUserInfo({})
        message.success('Your account has beensuccessfully deleted')    
        
      }).finally(()=>{
        setLoading(false)
      })
    
  }
  return (
      <div className='page_body'>
        <div className='slogan' style={{
          position: 'relative',
          flexDirection: 'column',
          zIndex: 2,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center'
        }}>
            <div className='meboo'></div>
          </div>
       <div className="google_login">
        <Spin spinning={loading}>
        <h4 style={{
          marginBlock: '10px',
          fontSize: '28px',
         
          
        }}>Cancellation Request</h4>
        <h6 
        style={{
          marginBlockStart: '10px',
          fontSize: '18px',
          color: '#666'
        }}
        >Please verify identity first</h6>
        <div style={{
          width: '182px',
          margin: 'auto'
        }}>

          <div 
            style={{
              display: userInfo.nickName?'block':'none'
            }}
          > 
          <div style={{
        display: 'flex',
        alignItems:"center",
        justifyContent: 'center',
        gap: '12px',
        marginBottom: '24px'
      }}>
        <img style={{width: '40px', height: '40px', borderRadius: '100%', border: '1px solid #999'}} src={userInfo.avatarUrl}/>
        <span style={{
          fontSize: '20px',
        }}>{userInfo.nickName}</span>
      </div>
      <Button 
      danger 
      onClick={()=>{
        Modal.confirm({
          title: 'Confirm?',
          content: '',
          onOk: ()=> {
            del()
          }
        });
      }}
      >Confirm Account Deletion</Button>
      </div>

      <div 
        style={{
          display: !userInfo.nickName?'block':'none'
        }}
        >
        <div
            id="g_id_onload"
            data-client_id="241368681569-97deun192jscl83d8n5345vkfasf6rcr.apps.googleusercontent.com"
            data-context="signin"
            data-ux_mode="popup"
            data-callback="handleCredentialResponse"
            data-nonce=""
            data-auto_prompt="false"
          >
          </div>

          <div
            className="g_id_signin"
            data-type="standard"
            data-shape="rectangular"
            data-theme="outline"
            data-text="signin_with"
            data-size="large"
            data-locale="en-US"
            data-logo_alignment="left"
          ></div>
        </div>
        </div>
        </Spin>
      </div>
      </div>
  )
}

export default App;